<template>
  <div class="execution">
    <basic-container>
      <avue-crud ref="crud"
                 :page.sync="page"
                 :data="tableData"
                 :table-loading="tableLoading"
                 :option="tableOption"
                 :upload-after="uploadAfter"
                 @on-load="getList"
                 @search-change="searchChange"
                 @refresh-change="refreshChange"
                 @size-change="sizeChange"
                 @current-change="currentChange">
        <template slot="imgUrl"
                  slot-scope="scope">
          <annex :sysFile="scope.row" />
        </template>
        <template slot="fileSize"
                  slot-scope="scope">
          {{ filterSize(scope.row.fileSize) }}
        </template>
        <template slot="menuLeft">
          <el-button type="primary"
                     size="small"
                     v-if="permissions.material_manage"
                     icon="el-icon-upload2"
                     @click="$refs.crud.rowAdd()">本地素材
          </el-button>
          <el-button type="primary"
                     size="small"
                     v-if="permissions.material_manage"
                     icon="el-icon-upload2"
                     @click="openDialog()">网络素材
          </el-button>
        </template>
        <template slot="menu"
                  slot-scope="scope">
          <el-button type="text"
                     v-if="permissions.material_manage"
                     size="small"
                     icon="el-icon-delete"
                     @click="rowDel(scope.row, scope.index)">删除
          </el-button>
          <el-button type="text"
                     size="small"
                     icon="el-icon-download"
                     @click="download(scope.row, scope.index)">下载
          </el-button>
        </template>
      </avue-crud>
    </basic-container>
    <el-dialog title="上传网络附件"
               :visible.sync="dialogVisible"
               :close-on-click-modal="false"
               width="50%">
      <el-form ref="netForm"
               label-width="100px"
               :rules="netFormRules"
               :model="netForm">
        <el-form-item label="网络地址"
                      prop="netUrl">
          <el-input placeholder="请输入网络地址"
                    v-model="netForm.netUrl" />
        </el-form-item>
        <el-form-item label="附件名称"
                      prop="fileName">
          <el-input placeholder="请输入附件名称不带扩展名"
                    v-model="netForm.fileName" />
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="uploadNetFile()">上传</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { delObj, fetchList, uploadNet } from "@/api/admin/sys-file";
import { tableOption } from "@/const/crud/admin/sys-file";
import { mapGetters } from "vuex";
import { handleDown, filterSize } from "@/util/util";
import { validatenull } from "@/util/validate";
import annex from '@/components/annex'

export default {
  name: "sysFile",
  components: {
    annex
  },
  data () {
    return {
      searchForm: {},
      tableData: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10, // 每页显示多少条
      },
      tableLoading: false,
      tableOption: tableOption,
      dialogVisible: false,
      netForm: {
        netUrl: undefined,
        fileName: undefined,
        bucketName: 'TMP'
      },
      netFormRules: {
        netUrl: [{ required: true, message: '请输网络地址', trigger: "blur" }]
      }
    };
  },
  computed: {
    ...mapGetters(["permissions"])
  },
  methods: {
    getList (page, params) {
      this.tableLoading = true;
      fetchList(
        Object.assign(
          {
            descs: "create_time",
            current: page.currentPage,
            size: page.pageSize,
          },
          params,
          this.searchForm
        )
      )
        .then((response) => {
          this.tableData = response.data.data.records;
          this.page.total = response.data.data.total;
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    rowDel: function (row, index) {
      var _this = this;
      this.$confirm(`是否确认删除原文件名为【${row.original}】`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delObj(row.id);
        })
        .then((resp) => {
          _this.$message.success(resp.data.message);
          this.getList(this.page);
        });
    },
    searchChange (form, done) {
      this.page.currentPage = 1;
      this.getList(this.page, form);
      done();
    },
    refreshChange () {
      this.searchForm = this.form;
      this.getList(this.page);
    },
    sizeChange (pageSize) {
      this.page.pageSize = pageSize;
    },
    currentChange (current) {
      this.page.currentPage = current;
    },
    download: function (row, index) {
      handleDown(row.original, row.url);
    },
    uploadAfter (res, done, loading) {
      if (!validatenull(res.fileName)) {
        this.$message.success("上传成功");
        this.getList(this.page);
      }
      done();
    },
    uploadNetFile () {
      this.$refs.netForm.validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '下载网络附件到本系统中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          uploadNet(this.netForm).then(resp => {
            loading.close()
            this.dialogVisible = false
            this.getList(this.page);
            this.$message.success(resp.data.message);
          }).catch(message => {
            loading.close()
          })
        }
      })
    },
    openDialog () {
      this.dialogVisible = true
      this.netForm = {
        netUrl: undefined,
        fileName: undefined,
        bucketName: 'TMP'
      }
    },
    filterSize (size) {
      return filterSize(size)
    }
  },
};
</script>

